<template>
  <div class="Table">
    <div class="Tableone">
      <Houtai />
    </div>
    <div class="Tabletwo">
      <el-button size="small  " type="primary" class="but" @click="handleEdit">添加管理员</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="编号" width="125">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" width="125">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.name }}</span>
              <!-- <el-tag size="medium">{{ scope.row.name }}</el-tag> -->
            </div>
          </template>
        </el-table-column>

        <el-table-column label="手机号(后台登录)" width="125">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.shouji }}</span>
          </template>
        </el-table-column>

        <el-table-column label="开通时间" width="125">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.riqi }}</span>
            <br />
            <span style="margin-left: 10px">{{ scope.row.shijian }}</span>
          </template>
        </el-table-column>

        <el-table-column label="权限" width="125">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zhuchiren }}</span>
            <br />
            <span style="margin-left: 10px">{{ scope.row.xinren }}</span>
            <br />
            <span style="margin-left: 10px">{{ scope.row.hezuo }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Houtai from "../../componnet/houtai";
export default {
  components: {
    Houtai
  },
  data() {
    return {
      tableData: [
        {
          date: "100",
          name: "白岩松",
          shouji: "1549841654748",
          riqi: "2018/2/10",
          shijian: "10:25",
          zhuchiren: "主持人管理",
          xinren: "新人管理",
          hezuo: "合作伙伴管理"
        },
        {
          date: "100",
          name: "白岩松",
          shouji: "1549841654748",
          riqi: "2018/2/10",
          shijian: "10:25",
          zhuchiren: "主持人管理",
          xinren: "新人管理",
          hezuo: "合作伙伴管理"
        },
        {
          date: "100",
          name: "白岩松",
          shouji: "1549841654748",
          riqi: "2018/2/10",
          shijian: "10:25",
          zhuchiren: "主持人管理",
          xinren: "新人管理",
          hezuo: "合作伙伴管理"
        },
        {
          date: "100",
          name: "白岩松",
          shouji: "1549841654748",
          riqi: "2018/2/10",
          shijian: "10:25",
          zhuchiren: "主持人管理",
          xinren: "新人管理",
          hezuo: "合作伙伴管理"
        }
      ]
    };
  },
  methods: {
    handleEdit() {
      this.$router.push("./glysz");
    }
  }
};
</script>
<style>
.Table {
  width: 1020px;
  height: 100%;
  margin: 50px auto;
  text-align: center;
}
.Tableone{
  float: left;
  width:220px;
}
.Tabletwo{
  float: right;
  width: 780px;
}
.but {
  float: left;
  margin: 10px;
  width: 92px;
  height: 30px;
  padding-left: 13px;
}
</style>